<template>
  <Nuxt-Layout>
    <br>
    <div ref="mapContainer" style="width: 1200px; height: 400px; margin: 0 auto;"></div>
    <br>
    <div class="info-c">
      <dl>
        <dt>业务处：</dt>
        <dd>0818-2282222</dd>
      </dl>
      <dl>
        <dt>报名处：</dt>
        <dd>0818-2537018</dd>
      </dl>
      <dl>
        <dt>办公室：</dt>
        <dd>0818-2187198</dd>
      </dl>
      <dl>
        <dt>教务处：</dt>
        <dd>0818-2998678</dd>
      </dl>
      <dl>
        <dt>保卫处：</dt>
        <dd>0818-3820789</dd>
      </dl>
      <dl>
        <dt>就业处：</dt>
        <dd>0818-2505577</dd>
      </dl>
      <dl>
        <dt>联系电话（24小时热线）：</dt>
        <dd>19960697331</dd>
      </dl>
      <dl>
        <dt>报名地址：</dt>
        <dd>四川省达州市通川区金龙大道139号</dd>
      </dl>
    </div>
    <br>
  </Nuxt-Layout>
</template>

<script setup>
import { useCountStore } from "~/store/counter.js";
useHead({
  script: [
    { src: 'https://map.qq.com/api/gljs?v=1.exp&key=LKOBZ-FIT6C-DEH2J-AEQQE-NJ5V5-65FR5' }
  ]
})
useCountStore().$patch({
  indexActive: 7,
});
// TDK
const prevHost = useRequestHeaders()["x-forwarded-proto"];
const host = useRequestHeaders()["host"];
const fullPath = useRoute()["fullPath"];
useSeoMeta({
  title: "技考邦_联系我们",
  keywords: "技考邦,联系我们",
  description: "技考邦，联系我们。",
  ogTitle: "技考邦_联系我们",
  ogDescription: "技考邦，联系我们。",
  ogType: "article",
  ogUrl: `${prevHost}://${host}${fullPath}`,
});
const mapContainer = ref(null);
//地图初始化函数，本例取名为init，开发者可根据实际情况定义
function initMap() {
  //定义地图中心点坐标
  var center = new TMap.LatLng(31.199864, 107.465012)
  //定义map变量，调用 TMap.Map() 构造函数创建地图
  var map = new TMap.Map(mapContainer.value, {
    center: center,//设置地图中心点坐标
    zoom: 17.2,   //设置地图缩放级别
    pitch: 43.5,  //设置俯仰角
    rotation: 45    //设置地图旋转角度
  });
  //创建并初始化MultiMarker
  var markerLayer = new TMap.MultiMarker({
    map,  //指定地图容器
    //样式定义
    styles: {
      //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
      myStyle: new TMap.MarkerStyle({
        width: 25,  // 点标记样式宽度（像素）
        height: 35, // 点标记样式高度（像素）
        //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
        anchor: { x: 16, y: 32 }
      })
    },
    //点标记数据数组
    geometries: [{
      id: 1,   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
      styleId: 'myStyle',  //指定样式id
      position: center,  //点标记坐标位置
      properties: {//自定义属性
        title: '达州市长虹职业技能培训学校',
        display: 'block'
      }
    }]
  });
  //初始化label
  var label = new TMap.MultiLabel({
    id: 'label-layer',
    map, //设置折线图层显示到哪个地图实例中
    //文字标记样式
    styles: {
      'label': new TMap.LabelStyle({
        'color': '#d40000', //颜色属性
        'size': 20, //文字大小属性
        'offset': { x: 0, y: 20 }, //文字偏移属性单位为像素
        'angle': 0, //文字旋转属性
        'alignment': 'center', //文字水平对齐属性
        'verticalAlignment': 'middle' //文字垂直对齐属性
      })
    },
    //文字标记数据
    geometries: [{
      'id': 'label_1', //点图形数据的标志信息
      'styleId': 'label', //样式id
      'position': center, //标注点位置
      'content': '达州市长虹职业技能培训学校', //标注文本
    }]
  });
}

onMounted(() => {
  setTimeout(() => {
    initMap()
  }, 1000)
});
</script>

<style lang="less" scoped>
.info-c {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;

  dl {
    flex: 50%;
    display: flex;
  }
}
</style>
